<style lang="less" scoped>
    .pack {
        width: 100%;
        height: auto;
        overflow: hidden;
        text-align: center;
        padding: 8px;
        display: flex;
    }
</style>
<template>
    <div class="cutting">
        <card-table
            table="2"
            cardtitle="包装工艺参数库"
            :columns="columns"
            :selectList="selectList"
            :defaultSelete="defaultSelete"
            :searchForm="searchForm"
            :formItem="formItem"
            :addbtn="false"
            @refresh="refresh"
            @on-current-change="onCurrentChange"
            :data="data">
            <div slot="elmtable">
                <el-table-column label="包装参数">
                    <el-table-column
                        label="">
                        <template slot-scope="scope">
                            <img :src="scope.row.bz_photo1" alt="" width="50px" height="50px" style="cursor: pointer;margin: 0 auto;" @click="showimg(scope.row.bz_photo1)">
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="">
                        <template slot-scope="scope">
                            <img :src="scope.row.bz_photo2" alt="" width="50px" height="50px" style="cursor: pointer;margin: 0 auto;" @click="showimg(scope.row.bz_photo2)">
                        </template>
                    </el-table-column>
                </el-table-column>
                <el-table-column label="包装要求">
                    <el-table-column
                        label="">
                        <template slot-scope="scope">
                            <img :src="scope.row.bz_photo3" alt="" width="50px" height="50px" style="cursor: pointer;margin: 0 auto;" @click="showimg(scope.row.bz_photo3)">
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="">
                        <template slot-scope="scope">
                            <img :src="scope.row.bz_photo4" alt="" width="50px" height="50px" style="cursor: pointer;margin: 0 auto;" @click="showimg(scope.row.bz_photo4)">
                        </template>
                    </el-table-column>
                </el-table-column>
                <el-table-column
                    label="图号"
                    fixed="right"
                    width="80">
                    <template slot-scope="scope">
                        {{ scope.row.version }}
                    </template>
                </el-table-column>
                <!--<el-table-column
                    fixed="right"
                    label="操作"
                    width="80">
                    <template slot-scope="scope">
                        <Button type="text" @click="xqclick(scope.row)">详情</Button>
                    </template>
                </el-table-column>-->
            </div>
        </card-table>
        <Modal title="查看图片" v-model="visible">
            <img :src="imgUrl" v-if="visible" style="width: 100%">
        </Modal>
    </div>
</template>
<script>
    import CardTable from '../components/cardTable.vue'
    import MyCard from '../components/myCard.vue'
    export default {
        name: 'pack',
        data () {
            return {
                columns: [
                    {
                        title: '产品编号',
                        key: 'nub',
                        width: 160,
                        fixed: 'left'
                    },
                    {
                        title: '产品名称',
                        key: 'name',
                        width: 160,
                        fixed: 'left'
                    }
                ],
                selectList: [
                    {
                        label: '产品编号',
                        value: 'nub'
                    },
                    {
                        label: '产品名称',
                        value: 'name'
                    },
                    {
                        label: '图号',
                        value: 'version'
                    }
                ],
                defaultSelete: 'nub',
                searchForm: {
                    'nub': '',
                    'name': '',
                    'version': ''
                },
                formItem: [
                    {
                        label: '产品编号',
                        key: 'nub',
                        placeholder: '输入产品编号'
                    },
                    {
                        label: '产品名称',
                        key: 'name',
                        placeholder: '输入产品名称'
                    },
                    {
                        label: '图号',
                        key: 'version',
                        placeholder: '输入产品图号'
                    }
                ],
                data: [],
                imgUrl: '',
                visible: false
            }
        },
        computed: {
        },
        methods: {
            refresh () {},
            onCurrentChange () {},
            xqclick () {},
            showimg (url) {
                this.imgUrl = url
                this.visible = true
                console.log(url)
            }
        },
        components: {
            CardTable,
            MyCard
        },
        mounted: function () {
            this.http.getAllBaozhuang(this, {})
        }
    };
</script>
